<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/common_head :: commonHead('3D-scatter')"></head>
<body>

<div class="page-container">
    <div class="left-content">
        <div class="inner-content">
            <div class="header-section">
                <div th:include="/header :: header"></div>
                <div class="clearfix"></div>
            </div>
            <div class="outter-wp">
                <div class="sub-heard-part">
                    <ol class="breadcrumb m-b-0">
                        <li><a href="index.html">Home</a></li>
                        <li class="active">Maps</li>
                    </ol>
                </div>
                <div class="graph-visual">
                    <h2 class="inner-tittle">3D散点图</h2>
                    <div class="graph">
                        <div class="map_container">
                            <select id="mydata"></select>
                            <button type="button" id="draw">绘图</button>

                            <table>
                                <thead>
                                <td></td>
                                <td>坐标轴含义</td>
                                <td>数据类型</td>
                                </thead>
                                <tr>
                                    <td>X轴</td>
                                    <td><select class="Axis3D" id="xAxis3D"></select></td>
                                    <td>
                                        <select class="Axis3D-type" id="xAxis3D-type">
                                            <option value="value">value</option>
                                            <option value="category">category</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Y轴</td>
                                    <td><select class="Axis3D" id="yAxis3D"></select></td>
                                    <td>
                                        <select class="Axis3D-type" id="yAxis3D-type">
                                            <option value="value">value</option>
                                            <option value="category">category</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Z轴</td>
                                    <td><select class="Axis3D" id="zAxis3D"></select></td>
                                    <td>
                                        <select class="Axis3D-type" id="zAxis3D-type">
                                            <option value="value">value</option>
                                            <option value="category">category</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                            <div id="3d-scatter" style="width: 1000px;height:800px;"></div>

                        </div>
                    </div>
                </div>
                <!--/graph-visual-->

            </div>
            <!--//outer-wp-->
            <!--footer section start-->
            <footer th:include="/footer :: footer">
                <!--<p>Copyright &copy; 2018.Panda company</p>-->
            </footer>
            <!--footer section end-->
        </div>
    </div>
    <!--//content-inner-->
    <!--/sidebar-menu-->
        <div class="sidebar-menu" th:include="/sidebar :: sidebar"></div>
        <div class="clearfix"></div>
</div>

<script>
    var option={
        visualMap: [ {
            type:'continuous',
            bottom: 10,
            right:10,
            calculable: true,
            dimension: '',
            max:'',
            min:'',
            inRange: {
                color: ['#1710c0', '#0b9df0', '#00fea8', '#00ff0d', '#f5f811', '#f09a09', '#fe0300']
            },
            textStyle: {
                color: '#fff'
            }
        },{
            type:'continuous',
            top: 10,
            calculable: true,
            dimension: '',
            max:'',
            min:'',
            inRange: {
                symbolSize: [3, 10]
            },
            textStyle: {
                color: '#fff'
            }
        }],
        grid3D: {
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisPointer: {
                lineStyle: {
                    color: '#ffbd67'
                }
            }
        },
        xAxis3D: {
            name:'',
            type: '',
            axisLine:{
                lineStyle:{
                    color:'#000000'
                }
            }
        },
        yAxis3D: {
            name:'',
            type:'',
            axisLine:{
                lineStyle:{
                    color:'#000000'
                }
            }
        },
        zAxis3D: {
            name:'',
            type: '',
            axisLine:{
                lineStyle:{
                    color:'#000000'
                }
            }
        },
        dataset: {
            source:[],
            dimensions:''
        },
        series: [
            {
                type: 'scatter3D',
                symbolSize:'',
                name:'散点图',
                encode: {
                    x:'',
                    y:'',
                    z:'',
                }
            }
        ]
    }

    myChart = echarts.init(document.getElementById("3d-scatter"));
    $("#draw").click(function () {
        var name=$("#mydata").children("option:selected").text()
        var file="/file/152837033820813886777456/"+name;
        $.get(file, function (json) {
            var data=json;
            var title=data[0];
            option.xAxis3D.name=title[0]
            option.xAxis3D.type="category";
            option.yAxis3D.name=title[1];
            option.yAxis3D.type="value";
            option.zAxis3D.name=title[2];
            option.zAxis3D.type='value';
            option.visualMap[0].dimension=title.indexOf(option.yAxis3D.name)
            option.visualMap[1].dimension=title.indexOf(option.zAxis3D.name)
            option.visualMap[0].max=findMax(data,title.indexOf(option.yAxis3D.name))
            option.visualMap[1].max=findMax(data,title.indexOf(option.zAxis3D.name))
            option.visualMap[0].min=findMin(data,title.indexOf(option.yAxis3D.name))
            option.visualMap[1].min=findMin(data,title.indexOf(option.zAxis3D.name))
            option.dataset.source=data;
            option.dataset.dimensions=data[0];
            option.series[0].encode.x=option.xAxis3D.name
            option.series[0].encode.y=option.yAxis3D.name
            option.series[0].encode.z=option.zAxis3D.name
            myChart.setOption(option);

            var content="";
            for(var i=0;i<title.length;i++){
                content+="<option value =\"" + title[i]+ "\">" +title[i]+"</option>"
            }
            $(".Axis3D").append(content);
            $("#xAxis3D").val(option.xAxis3D.name)
            $("#xAxis3D-type").val("category")
            $("#yAxis3D").val(option.yAxis3D.name)
            $("#yAxis3D-type").val("value")
            $("#zAxis3D").val(option.zAxis3D.name)
            $("#zAxis3D-type").val("value")

            $(".Axis3D").change(function () {
                var name=$(this).children("option:selected").text()
                var index=title.indexOf(name)
                var max=findMax(data,index)
                var min=findMin(data,index)

                if($(this).attr("id")=="xAxis3D"){
                    option.xAxis3D.name=name;
                    option.series[0].encode.x=option.xAxis3D.name
                }else if($(this).attr("id")=="yAxis3D"){
                    option.yAxis3D.name=name;
                    option.series[0].encode.y=option.yAxis3D.name
                    option.visualMap[0].dimension=index;
                    option.visualMap[0].max=max;
                    option.visualMap[0].min=min;
                    option.visualMap[0].name=name;
                }else {
                    option.zAxis3D.name=name;
                    option.series[0].encode.z=option.zAxis3D.name
                    option.visualMap[1].dimension=index;
                    option.visualMap[1].max=max;
                    option.visualMap[1].min=min;
                    option.visualMap[1].name=name;
                }
                myChart.setOption(option)
            })

            $(".Axis3D-type").change(function () {
                var type=$(this).children("option:selected").text()
                if($(this).attr("id")=="xAxis3D-type"){
                    option.xAxis3D.type=type;
                }else if($(this).attr("id")=="yAxis3D-type"){
                    option.yAxis3D.type=type;
                }else {
                    option.zAxis3D.type=type;
                }
                myChart.setOption(option)
            })
        })
    })

    function findMax(data,col) {
        var row=data.length
        var max=data[1][col];
        for(var i=1;i<row;i++){
            if(data[i][col]>max)max=data[i][col];
        }
        return max;
    }
    function findMin(data,col) {
        var row=data.length
        var min=data[1][col];
        for(var i=1;i<row;i++){
            if(data[i][col]<min)min=data[i][col];
        }
        return min;
    }

    $.ajax({
        type: "get",
        url: "listFile",
        processData: false,  // 告诉jQuery不要去处理发送的数据
        contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
        success: function (data) {
            for(var i=0;i<data.length;i++){
                $("#mydata").append("<option value =\"" + data[i]+ "\">" +data[i]+"</option>")
            }
        },
        error: function () {

        }
    });
</script>
</body>
</html>